<template>
	<div class="actionsheet-container" v-bind:class="{hide: !sheetVisible }">
		<div class="mask" v-on:click="$emit('hide-sheet')"></div>
		<div class="btn-list move">
			<div class="item" v-for="(item, index) in actions" :key="item.index" v-on:click="$emit(item.method, index)">
				<div>{{item.name}}</div>
			</div>
			<div class="item cancelItem">取消</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 0
    };
  },

  props: ["sheetVisible", 'actions'],

  mounted() {
    // console.log(title, descriptions);
  },
  methods: {
    // hideSheet: function () {
    // 	this.sheetVisible = false;
    // }

  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.actionsheet-container {
  @include sc(0.3rem, #ddd);
  @include bl;
  width: 100%;
  height: 100%;

  .mask {
    @include bl;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
  }

  .btn-list {
    @include bl;
    width: 100%;

    .item {
      @include fj(center);

      height: 1rem;
      line-height: 1rem;
      background: #fff;
      border-top: 2px solid #f1f1f1;
    }

    .cancelItem {
      border-top: 8px solid #f1f1f1;
    }
  }
}

.move {
  animation: moveTop 0.5s;
  -webkit-animation: moveTop 0.5s;
}

@keyframes moveTop {
  from {
    bottom: -2rem;
  }

  to {
    bottom: 0rem;
  }
}

/*Safari and Chrome*/
@-webkit-keyframes moveTop {
  from {
    bottom: -2rem;
  }

  to {
    bottom: 0rem;
  }
}

.hide {
  animation: moveToBottom 0.5s;
  -webkit-animation: moveToBottom 0.5s;
}

@keyframes moveToBottom {
  from {
    bottom: 0rem;
  }

  to {
    bottom: -2rem;
  }
}

/*Safari and Chrome*/
@-webkit-keyframes moveToBottom {
  from {
    bottom: 0rem;
  }

  to {
    bottom: -2rem;
  }
}
</style>
